<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../assets/css/common.css">
    <link rel="stylesheet" href="../assets/css/vue.css">
    <script src="../assets/js/vue.js"></script>
    <style>
        h3{
            padding: 10px;
            color: red;
            font-weight: bold;
            font-size: 25px;
        }
        h3::after{
            content: "==========";
        }
        h3::before{
            content: "==========";
        }
        #app div{
            font-size: 18px;
        }
        #app ul{
            list-style-type: decimal;
        }
        #app ul>li{
            padding: 10px;
            border-bottom: 1px solid #dddddd;
        }
        #app div>input[type="checkbox"]{
            position: relative;
        }
        #app div>input[type="checkbox"]+label{
            margin-left: 5px;
            font-size: 20px;
        }

        #arr_show{
            color: rgb(219, 29, 38);
            font-size: 25px;
        }
       
    </style>
</head>
<body>
    <div id="app">
        <a href="../index.html" class="retu">BACK</a>
        <h1>v-model双向数据绑定</h1>
        <span>原始文本信息：{{ message }}</span>
        <h3>文本框</h3>
        <div>v-model：<input type="text" v-model.lazy.number.trim="message"></div>
        <h3>修饰符</h3>
        <ul>
            <li>.lazy:取代input监听的onchange事件</li>
            <li>.number：输入的字符串转化为数字,如果第一个是字母的话,将没有作用,如果第一个是数字就有作用</li>
            <li>.trim:输入去掉首尾空格</li>
        </ul>
        <h3>文本区域加入数据绑定</h3>
        <div>
            <textarea cols="30" rows="10" v-model="message"></textarea>
        </div>
        <h3>多选按钮绑定一个值</h3>
        <div>
            <input type="checkbox" id="isTrue" v-model="isTrue">
            <label for="isTrue">{{ isTrue }}</label>
        </div>
        <h3>多选绑定一个数组</h3>
        <div>
            <input type="checkbox" id="liuhao" value="liuhao" v-model="names" />
            <span></span>
            <label for="liuhao">liuhao</label>
            <input type="checkbox" id="liuhouse" value="liuhouse" v-model="names" />
            <label for="liuhouse">liuhouse</label>
            <input type="checkbox" id="gaobai" value="gaobai" v-model="names" />
            <label for="gaobai">gaobai</label>
            <div v-if="names.length > 0" id="arr_show">{{ names }}</div>
        </div>
        <h3>单选按钮绑定数据</h3>
        <div>
            <input type="radio" id="one" value="男" v-model="sex" />
            <label for="one">男</label>
            <input type="radio" id="two" value="女" v-model="sex">
            <label for="two">女</label>
            <div id="arr_show">{{ sex }}</div>
        </div>
    </div>
    <script>
        let app = new Vue({
            el : '#app',
            data:{
                message:'hello',
                isTrue:true,
                names:[],
                sex:'男'
            }
        });
    </script>
</body>
</html>